<template>
  <page-header-wrapper :title="false">
    <a-alert message="！！！审核通过的合同，如果总打款金额有变动，需要重新提交审核" banner />
    <a-card :bordered="false" :style="{ marginTop: '25px', marginBottom: '25px' }">
      <a-steps :current="step">
        <a-step title="填写合同基本信息" />
        <a-step title="选择业务" />
        <a-step title="上传纸质合同" />
        <a-step title="添加打款信息" />
        <a-step title="添加地址信息" />
        <a-step title="提交审核" />
      </a-steps>
    </a-card>
    <a-card title="添加合同" :loading="loading" :bordered="false">
      <div slot="extra">
        <a-button type="primary" ghost style="margin-right:5px;" @click="$router.go(-1)">返回</a-button>
        <a-button style="margin-right:5px;" v-if="queryParam.contract_id" type="danger" @click="getContractStatus"><a-icon type="edit"></a-icon>{{ statusOpt[statusText] }}</a-button>
        <!--          <a-button v-if="queryParam.contract_id" icon="eye" type="danger">已开启材料未提交业务</a-button>-->
      </div>
      <a-alert :message="`合同编号：${contract.contract_no}`" :description="`合同金额：${contract.contract_amount}(官费：${contract.contract_official_fee} | 代理费：${contract.contract_agency_fee}) (已打款金额：${contract.contract_amount_paid} | 剩余尾款：${contract.contract_tail_money})`" type="success" :style="{ marginBottom: '20px' }" />
      <a-tabs :tabBarGutter="10" :active-key="currentTabs" type="card" size="large" @change="onTabs">
        <a-tab-pane key="1" tab="基本信息"></a-tab-pane>
        <a-tab-pane key="2" tab="业务信息"></a-tab-pane>
        <a-tab-pane key="3" tab="纸质合同"></a-tab-pane>
        <a-tab-pane key="4" tab="打款信息"></a-tab-pane>
        <a-tab-pane key="5" tab="地址信息"></a-tab-pane>
        <a-tab-pane key="6" tab="审核历史"></a-tab-pane>
        <a-tab-pane key="7" tab="转移记录"></a-tab-pane>
        <a-tab-pane key="8" tab="退款信息"></a-tab-pane>
        <a-tab-pane v-if="currentCompany != 'zy' || currentCompany != 'jh'" key="9" tab="发票信息"></a-tab-pane>
        <!--          <a-tab-pane key="10" tab="查看未开启业务"></a-tab-pane>-->
        <a-tab-pane key="10" tab="更改业务"></a-tab-pane>
      </a-tabs>
      <div class="contract_content">
        <Base :info="info" v-if="currentTabs == 1" @nextStep="onSubEdit"></Base>
        <Business :query="queryParam" v-if="currentTabs == 2" @addBusiness="updAmount"></Business>
        <Others :info="info" v-if="currentTabs == 3" @nextStep="onSubEdit"></Others>
        <Payment :query="queryParam" v-if="currentTabs == 4" @addPayment="updAmount"></Payment>
        <Address :query="queryParam" v-if="currentTabs == 5"></Address>
        <Histories :query="queryParam" v-if="currentTabs == 6"></Histories>
        <Logs :query="queryParam" v-if="currentTabs == 7"></Logs>
        <Refund :query="queryParam" v-if="currentTabs == 8" @addRefund="updAmount"></Refund>
        <Invoice :query="queryParam" v-if="currentTabs == 9 && (currentCompany != 'zy' || currentCompany != 'jh')"></Invoice>
      </div>
    </a-card>
    <a-modal
      title="编辑合同状态"
      v-model="visible"
      width="200px"
      :footer="null"
    >
      <a-row :gutter="[0,30]">
        <a-col :span="24">
          <a-radio-group name="radioGroup" v-model="status.selection">
            <a-radio :style="radioStyle" v-for="(item, index) in status.items" :key="index" :value="index">
              {{ item }}
            </a-radio>
          </a-radio-group>
        </a-col>
        <a-col :span="24" :style="{ textAlign: 'right' }">
          <a-button type="primary" @click="postContractStatus">提交</a-button>
        </a-col>
      </a-row>
    </a-modal>
  </page-header-wrapper>
</template>

<script>
  import storage from 'store'
  import { CURRENT_COMPANY } from '@/store/mutation-types'
  import {
    Base,
    Business,
    Histories,
    Others,
    Logs,
    Address,
    Payment,
    Refund,
    Invoice
  } from './components'
  import { getEdit, saveEdit, getStatus, editStatus } from '@/api/contract'

  export default {
    components: {
      Base,
      Business,
      Histories,
      Others,
      Logs,
      Address,
      Payment,
      Refund,
      Invoice
    },
    name: 'ContractDetail',
    data () {
      return {
        queryParam: {
          contract_id: '',
          part: '1'
        },
        currentTabs: '',
        info: {},
        loading: true,
        contract: {},
        visible: false,
        status: {},
        radioStyle: {
          display: 'block',
          height: '30px',
          lineHeight: '30px'
        },
        statusOpt: {},
        statusText: '',
        step: 0,
        currentCompany: storage.get(CURRENT_COMPANY)
      }
    },
    activated () {
      this.queryParam['contract_id'] = this.$route.params.cid
      this.getEditInfo(this.queryParam, '1')
    },
    methods: {
      getEditInfo (params, tab) {
        const app = this
        const info = {}
        app.loading = true
        getEdit(params).then(res => {
          const result = res.result.contract
          const base = res.result
          if (res.status === 0) {
            for (const k in result) {
              info[k] = result[k]
            }
            for (const j in base) {
              if (j !== 'contract') {
                app.contract[j] = base[j]
              }
            }
            app.statusText = base.contract_status
            app.statusOpt = base.status_opts
            app.info = info
            app.currentTabs = tab
            app.contract = base
            app.queryParam['status'] = base.contract_status
            app.loading = false
          }
        })
      },
      onSubEdit (part) {
        const { info } = this
        const form = {}
        form['contract_id'] = this.queryParam['contract_id']
        form['part'] = part
        if (part === '1') {
          form['contract[tm_name]'] = info.tm_name
          form['contract[subject_id]'] = info.subject_id
          form['contract[subject]'] = info.subject
          form['contract[customer_name]'] = info.customer_name
          form['contract[phone1]'] = info.phone1
          form['contract[phone2]'] = info.phone2
          form['contract[wechat]'] = info.wechat
          saveEdit(form, '1').then(res => {
            if (res.status === 0) {
              this.$success({
                title: '保存成功'
              })
            } else {
              this.$warning({
                title: res.msg
              })
            }
          })
        } else {
          form['contract[paper_contract_file_url]'] = info.paper_contract_file_url
          form['contract[paper_contract_file_name]'] = info.paper_contract_file_name
          form['contract[customer_confirm]'] = info.customer_confirm
          saveEdit(form).then(res => {
            if (res.status === 0) {
              this.$success({
                title: '保存成功'
              })
            } else {
              this.$warning({
                title: res.msg
              })
            }
          })
        }
      },
      onTabs (key) {
        if (key !== '1') this.queryParam['part'] = '2'
        else this.queryParam['part'] = '1'
        this.currentTabs = key
        this.step = key - 1
      },
      getContractStatus () {
        const app = this
        app.status.contract_id = app.queryParam['contract_id']
        getStatus(app.status.contract_id).then(res => {
          if (res.status === 0) {
            app.status.items = res.result.items
            app.status.selection = (res.result.selection).toString()
            app.visible = true
          } else {
            app.$error({
              title: '警告',
              content: res.msg
            })
          }
        })
      },
      postContractStatus () {
        const app = this
        editStatus(app.status.contract_id).then(res => {
          if (res.status === 0) {
            app.getEditInfo(this.queryParam, '1')
            app.visible = false
          } else {
            app.$error({
              title: '警告',
              content: res.msg
            })
          }
        })
      },
      updAmount () {
        this.getEditInfo(this.queryParam, this.currentTabs)
      }
    }
  }
</script>

<style scoped>

</style>
